<template>
  <div class="page">
    <!-- 顶部：返回 | 详情 -->
    <div class="page-header">
      <a-button type="link" class="back" @click="goBack">
        <LeftOutlined class="back-icon" /> 返回
      </a-button>
      <span class="sep">|</span>
      <span class="title">详情</span>
    </div>

    <!-- 新父级 -->
    <div class="content-area">
      <!-- 内容 -->
      <div class="content">
        <div class="row">
          <div class="label">名称：</div>
          <div class="value">{{ item?.query ?? "-" }}</div>
        </div>
        <div class="row">
          <div class="label">启用状态：</div>
          <div class="value">
            <a-radio-group :value="item?.status" disabled>
              <a-radio value="published">启用</a-radio>
              <a-radio value="draft">停用</a-radio>
            </a-radio-group>
          </div>
        </div>
      </div>

      <!-- 底部 -->
      <div class="page-footer">
        <div class="footer-inner">
          <a-button type="link" class="foot-btn primary" @click="goEdit"
            >编辑</a-button
          >
          <span class="vsep">|</span>
          <a-button type="link" class="foot-btn ghost" @click="goBack"
            >返回</a-button
          >
        </div>
      </div>

      <div class="bottom-gap" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { LeftOutlined } from "@ant-design/icons-vue";
import {
  getStopwordById,
  type StopwordItem,
} from "@/api/modules/stopwords.api";

const route = useRoute();
const router = useRouter();

const id = route.query.id as string | undefined;
const ret = route.query.ret as string | undefined;

const FALLBACK_LIST = "/stopwordListTab";
const item = ref<StopwordItem | null>(null);

function goBack() {
  if (ret) router.replace(ret);
  else router.replace({ path: FALLBACK_LIST });
}
function goEdit() {
  if (!id) return;
  router.push({
    path: "/stopwordListTabPage",
    query: { id, ret: ret || route.fullPath },
  });
}

async function load() {
  if (!id) {
    item.value = null;
    return;
  }
  item.value = (await getStopwordById(id)) as StopwordItem;
}
onMounted(load);
</script>

<style scoped>
.page {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ================= 顶部 ================= */
.page-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 24px;
  border-bottom: 1px solid #f0f0f0;
  flex: 0 0 auto;
}

.page-header .back.ant-btn.ant-btn-link {
  padding: 0 24px 0 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #81889c !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

.page-header .back.ant-btn.ant-btn-link > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 24px !important;
  line-height: 24px !important;
}
.page-header .back .back-icon {
  font-size: 16px !important;
  color: inherit !important;
  line-height: 1 !important;
}

.page-header .sep {
  height: 24px;
  line-height: 24px;
  color: #d9d9d9;
  user-select: none;
}
.page-header .title {
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #000;
}

.content-area {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));

  /* 自定义滚动条 */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
.content-area::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.content-area::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.content-area::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}
.content-area::-webkit-scrollbar-track {
  background: transparent;
}

/* 内容区域 */
.content {
  flex: 0 0 auto;
  padding: 16px 24px 0 140px;
  max-width: calc(720px + 100px);
  box-sizing: border-box;
}
.row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}
.row:last-child {
  border-bottom: 0;
}
.label {
  color: #333;
  width: 100px;
  flex: 0 0 100px;
  line-height: 24px;
}
.value {
  flex: 1 1 auto;
  color: #222;
  word-break: break-word;
  line-height: 24px;
}

/* 底部 */
.page-footer {
  position: static;
  margin-top: 16px;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom)) 24px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03);
}
.footer-inner {
  width: 100%;
  max-width: calc(720px + 100px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  text-align: center;
}
.vsep {
  color: #e5e7eb;
  user-select: none;
  line-height: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  margin: 0 2px;
}

/* 等宽按钮样式 */
.foot-btn {
  height: 36px;
  /* min-width: 108px; */
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease,
    border-color 0.2s ease;
}
.foot-btn.primary {
  background: #1677ff !important;
  border: 1px solid #1677ff !important;
  color: #fff !important;
}
.foot-btn.primary:hover {
  filter: brightness(1.02);
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.2);
}
.foot-btn.ghost {
  background: #fafafa !important;
  border: 1px solid #e8e8e8 !important;
  color: #666 !important;
}
.foot-btn.ghost:hover {
  background: #fff !important;
  color: #595959 !important;
  border-color: #d9d9d9 !important;
}

/* 末尾留白 */
.bottom-gap {
  height: 8px;
}

/* 小屏优化 */
@media (max-width: 576px) {
  .page-header {
    padding: 16px 12px;
  }
  .content {
    padding: 12px 12px 0 12px;
    max-width: none;
  }
  .page-footer {
    padding-left: 12px;
    padding-right: 12px;
  }
  .footer-inner {
    max-width: none;
  }
}

.top-divider,
.bottom-divider {
  display: none;
}
</style>
